<script setup>
import { ref, defineExpose, onMounted } from 'vue'
import {setLocales,i18n} from '../lang'
const { locale, t } = i18n.global
let show = ref(false)
let open = () => {
  show.value = true
}
let radio = ref('tw')
onMounted(()=>{
  radio.value = localStorage.lang || 'tw'
})
let onRadioChange = (lang) => {
  setLocales(lang)
  locale.value = lang
  show.value = false
}




defineExpose({
  open
})
</script>

<template>
  <van-overlay z-index="99" :show="show">
    <div class="wrapper">
      <div class="lang-popup ">
        <div class="lang-title">切换语言</div>
        <van-radio-group v-model="radio" @change="onRadioChange">
          <van-radio name="zh">
            <div class="lang-item">
              <img class="lang" src="../assets/icon/zh.png" alt="" />
              <div class="lang-name">中文（简体）</div>
            </div>
            <template #icon="props">
              <div class="img-icon">
                <img v-if="props.checked" class="img-icon" src="../assets/icon/icon-radio.png" />
              </div>
            </template>
          </van-radio>
          <van-radio name="tw">
            <div class="lang-item">
              <img class="lang" src="../assets/icon/tw.png" alt="" />
              <div class="lang-name">中文（繁体）</div>
            </div>
            <template #icon="props">
              <div class="img-icon">
                <img v-if="props.checked" class="img-icon" src="../assets/icon/icon-radio.png" />
              </div>
            </template>
          </van-radio>
          <van-radio name="en">
            <div class="lang-item">
              <img class="lang" src="../assets/icon/en.png" alt="" />
              <div class="lang-name">English</div>
            </div>
            <template #icon="props">
              <div class="img-icon">
                <img v-if="props.checked" class="img-icon" src="../assets/icon/icon-radio.png" />
              </div>
            </template>
          </van-radio>
        </van-radio-group>
      </div>
    </div>
  </van-overlay>
</template>

<style scoped lang="scss">
.wrapper {
  width: 100vw !important;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-popup {
  width: 327px;
  border-radius: 15px;
  background: linear-gradient(86deg, #12255e 16.75%, #002081 102.69%);
  box-shadow: 0 0 5px 0 rgba(187, 211, 255, 0.54) inset, 0 0 10px 0 rgba(0, 59, 255, 0.33);
  padding: 22px 13px 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .lang-title {
    text-align: left;
    color: #fff;
    font-family: Altinn-DIN;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}


.van-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .van-radio {
    position: relative;
    gap: 10px;

    .van-radio__icon {
      position: absolute;
      top: 50%;
      right: 17px;
      transform: translateY(-50%);
    }

    .img-icon {
      width: 23px;
      height: 23px;
    }

    .van-radio__label {
      width: 100%;
      margin-left: 0;

      .lang-item {
        display: flex;
        align-items: center;
        padding: 14px 17px;
        border-radius: 16px;
        min-width: 220px;
        background: rgba(255, 255, 255, 0.1);

        .lang {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }

        .lang-name {
          font-size: 16px;
          font-weight: 500;
          color: #fff;
        }
      }
    }
  }
}
</style>
